import React, { Component } from 'react'
import { Text, View, Button } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack';

import RNComponentsScreen from '../screens/RNComponents'
import AlertDemoScreen from '../screens/RNComponents/AlertDemo'
import SectionListDemoScreen from '../screens/RNComponents/SectionListDemo'
import ActivityIndicatorDemoScreen from '../screens/RNComponents/ActivityIndicatorDemo'
import StatusBarDemoScreen from '../screens/RNComponents/StatusBarDemo'
import ImageDemoScreen from '../screens/RNComponents/ImageDemo'
import TouchableDemoScreen from '../screens/RNComponents/TouchableDemo'
import TextInputDemoScreen from '../screens/RNComponents/TextInputDemo'
import ScrollViewDemoScreen from '../screens/RNComponents/ScrollViewDemo'
import ModelDemoScreen from '../screens/RNComponents/ModelDemo'
import FlatListDemoScreen from '../screens/RNComponents/FlatListDemo'
import AnimatedDemoScreen from '../screens/RNComponents/AnimatedDemo'

// 第三方组件
import WebViewDemoScreen from '../screens/RNComponents/WebViewDemo'
import PickerDemoScreen from '../screens/RNComponents/PickerDemo'
import SwiperDemoScreen from '../screens/RNComponents/SwiperDemo'
import LinearGradientDemoScreen from '../screens/RNComponents/LinearGradientDemo'

// 自定义组件
import LoadingScreen from '../components/Loading'
import LoadingMoreScreen from '../components/LoadingMore'

const Stack = createStackNavigator()

export default class CoreComponentsStack extends Component {
  render() {
    return (
      <Stack.Navigator
        // headerMode={'none'} // 所有 Screen 都不显示 header
        headerShown={true} // 不显示导航头
        screenOptions={{ // 设置 screen 组件的样式
          headerTintColor: 'red',
          headerStyle: { backgroundColor: 'tomato' },
        }}
        options={{
          title: 'RN 布局'
        }}
      >
        <Stack.Screen
          name="RNComponents"
          component={RNComponentsScreen} 
          
          options={{
            title: 'RN 组件',
            headerStyle: {
              backgroundColor: 'tomato',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerShown: false,
            headerTitleAlign:"center"
          }}
        />
        <Stack.Screen 
          name="AlertDemo" 
          component={AlertDemoScreen} 
          options={{
            title: "Alert && Button"
          }}
        />
        
        <Stack.Screen name="SectionListDemo" component={SectionListDemoScreen} />
        <Stack.Screen name="ActivityIndicatorDemo" component={ActivityIndicatorDemoScreen} />
        <Stack.Screen 
          name="StatusBarDemo" 
          component={StatusBarDemoScreen} 
          options={{
            title: "Statusbar && Switch"
          }}
        />
        <Stack.Screen name="TextInputDemo" component={TextInputDemoScreen} />
        <Stack.Screen name="ImageDemo" component={ImageDemoScreen} />
        <Stack.Screen name="TouchableDemo" component={TouchableDemoScreen} />
        <Stack.Screen name="ScrollViewDemo" component={ScrollViewDemoScreen} />
        <Stack.Screen name="ModelDemo" component={ModelDemoScreen} />
        <Stack.Screen name="FlatListDemo" component={FlatListDemoScreen} />
        <Stack.Screen name="AnimatedDemo" component={AnimatedDemoScreen} />

        <Stack.Screen name="WebViewDemo" component={WebViewDemoScreen} />
        <Stack.Screen name="PickerDemo" component={PickerDemoScreen} />
        <Stack.Screen name="SwiperDemo" component={SwiperDemoScreen} />
        <Stack.Screen name="LinearGradientDemo" component={LinearGradientDemoScreen} />

        <Stack.Screen name="Loading" component={LoadingScreen} />
        <Stack.Screen name="LoadingMore" component={LoadingMoreScreen} />
      </Stack.Navigator>
    )
  }
}
